<script setup lang="ts">
//@ts-ignore
import Temp from './temp.vue';
import {ref} from 'vue';
</script>
<template>
    <el-tabs tab-position="left" type="border-card">
        <el-tab-pane label="首页"> <temp type="home"></temp> </el-tab-pane>
        <el-tab-pane label="作品展示">
            <temp type="work" />
        </el-tab-pane>
        <!-- <el-tab-pane label="作品详情">
            <temp type="detail" />
        </el-tab-pane>
        <el-tab-pane label="联系我们">
            <temp type="callus" />
        </el-tab-pane> -->
    </el-tabs>
</template>
<style lang="less">
.el-tab-pane {
    padding: 20px;
    height: 100%;
}
.el-tabs--border-card > .el-tabs__header {
    width: 140px;
    padding-left: 20px;
}
.el-tabs__content {
    height: 100% !important;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
    height: 60px;
    line-height: 60px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.el-tabs__nav {
    // overflow: visible;
    padding-left: 10px;
}
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active {
    // border-color: #d1dbe5 !important;
    border: 1px solid #d1dbe5 !important;
    border-right-color: transparent !important;
}
</style>
